<template>
    <div>
        <Flyleaf></Flyleaf>
        <div class="ui fluid container">
            <div class="ui grid">
                <div class="two wide column"></div>
                <ArticleList></ArticleList>
                <SideBar>
                    <template v-slot:header>
                        <Postcard></Postcard>
                    </template>
                </SideBar>
                <div class="two wide column"></div>
            </div>
        </div>

        <FooterForMain></FooterForMain>
    </div>
</template>

<script>
    import Flyleaf from '../../components/Flyleaf.vue';
    import ArticleList from "../../pages/article/ArticleList.vue";
    import SideBar from "../../pages/sideBar/SideBar.vue";
    import FooterForMain from "../../components/FooterForMain";
    import Postcard from "../../components/Postcard";

    export default {
        name: "index",
        components: {
            Flyleaf,
            ArticleList,
            SideBar,
            FooterForMain,
            Postcard,
        },
    }

</script>

<style scoped>
    .container {
        margin-top: 3vh;
    }

</style>
